<template>
	<view class="wrap1">
		<image class="bgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/1.png" mode=""></image>


		<!-- <u-sticky :h5-nav-height='0'> -->
		<!-- 只能有一个根元素 -->
		<view class="sticky">
			<u-tabs bg-color="#fff" bar-width="96" inactive-color='#666666' bar-height="5" active-color="#333"
				:list="tablist" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<!-- </u-sticky> -->


		<view v-if="list1.length" class="datas">
			<list :list1="list1" :current="current" />
			<uni-load-more :status="status"></uni-load-more>
		</view>
		
		
		<view v-else class="empty" style="padding-top: 150px;">
			<view v-if="!list1.length && senDate" class="emptyAddress-box">
				<u-empty text="暂无内容" mode="news"></u-empty>
			</view>
		</view>
		
		
		<!-- 无数据 -->
		<!-- <u-empty text="暂无数据" mode="data"></u-empty> -->
	</view>

</template>
<script>
	import list from './list.vue'
	export default {
		components: {
			list
		},
		data() {
			return {
				tablist: [{
					name: '进行中'
				}, {
					name: '已完成'
				}, {
					name: '已取消'
				}],
				current: 0,
				total: null, //总共多少条数据
				formData: {
					limit: 15, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],
				jobState: '进行中',
			};
		},
		onLoad() {
			this.formData.page = 1
			this.list1 = []
			this.getlist()
		},

		onReachBottom() {
			let allTotal = this.formData.page * this.formData.limit;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;

				this.getlist();


			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},

		methods: {
			getlist() {
				this.senDate = false;
				this.$u.api
					.pageTaskList({
						page: this.formData.page,
						limit: this.formData.limit,

						jobState: this.jobState, //状态: 已完成, 进行中, 已取消
						// plat:this.type // 
					})
					.then((res) => {

						this.senDate = true;
						if (res.code == 0) {

							console.log(res.data, 666666);
							this.total = res.data.total;
							// this.total =1; //先写死
							const newlist = res.data.list;
							this.list1.push(...newlist);




							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {
							console.log("请求数据失败");
						}
					});
			},
			change(index) {
				this.current = index;
				this.jobState = this.tablist[index]?.name
				this.formData.page = 1
				this.list1 = []
				this.getlist()
			},


		}
	};
</script>
<style lang="scss" scoped>
	.sticky {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 8;
	}

	/deep/ .u-tab-bar {
		background: #3757FF !important;
	}

	// /deep/ .u-sticky-wrap {
	// 	background: none !important;
	// }

	.wrap1 {
		.datas {
			margin: 100rpx 32rpx 0;
			background: #fff;
			border-radius: 15rpx;
			padding: 32rpx;

		}
	}
</style>
